<template>
    <div class="test">
        <!-- <x-header title="新增日常检查" @header-background-color=""></x-header>-->
        <div class="form-section newtestlook">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>选择单位</label>
                </div>
                <div class="right-select"
                     @click="selectType">
                    {{companyName}}
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
                <!--<group>
                    <popup-picker :data="list3"
                                  :columns="3"
                                  placeholder='请选择'
                                  v-model="value4"
                                  show-name></popup-picker>
                </group>-->
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>选择工程类别</label>
                </div>
                <div class="right-select"
                     @click="projectType">
                    {{projectName}}
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
                <!--<group>
                    <popup-picker :data="list3"
                                  :columns="3"
                                  placeholder='请选择'
                                  v-model="value4"
                                  show-name></popup-picker>
                </group>-->
            </div>
            <div class="form-item form-item-style1"
                 v-if="this.role==1">
                <div class="label-title">
                    <label>选择区域</label>
                </div>
                <div class="right-select"
                     @click="selectArea">
                    {{areaName}}
                    <i class="iconfont icon-jinru rightmsg"></i>
                </div>
                <!--<group>
                    <popup-picker :data="list3"
                                  :columns="3"
                                  placeholder='请选择'
                                  v-model="value4"
                                  show-name></popup-picker>
                </group>-->
            </div>
            <div class="form-item form-item-style1 setstate">
                <div class="label-title">
                    <label>隐患状态</label>
                </div>
                <group>
                    <popup-picker :data="list1"
                                  v-model="state"
                                  @on-change="changestate"
                                  placeholder="全部"></popup-picker>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>统计开始时间</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <!--:start-date="'2019-09-09'"-->
                    <datetime :start-date="showDate"
                              v-model="$store.state.checkcompany.starttime"
                              @on-change="changetime"></datetime>
                </group>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>统计结束时间</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <group>
                    <!--:start-date="'2019-09-09'"-->
                    <datetime :start-date="showDate"
                              v-model="$store.state.checkcompany.endtime"
                              @on-change="changetime"></datetime>
                </group>
            </div>
        </div>
        <div class="form-sectionq">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label class="lookmsg">隐患总数:
                        <span>{{showList.length}}</span>
                    </label>
                </div>
            </div>
        </div>
        <div class="content-gulp"
             v-for="(item,index) in showList"
             :key="index">
            <div class="contentlist"
                 @click="changerouter(item)">
                <div class="card-padding">
                    <div class="card-title1">{{item.No}}</div>
                    <div class="card-show">{{item.Description}}</div>
                    <div class="danger-nomal">【{{item.HdLevel}}】
                        <span>{{item.StateDesc}}</span>
                    </div>
                </div>
                <div class="newImage">
                    <img :src="item.ProblemImgs[0]">
                </div>
            </div>
        </div>
        <myMenu></myMenu>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompany"></companyProp>
        <projectTypeProp :selectProjectType="selectProjectType"
                         :projectTypeShow="projectTypeShow"></projectTypeProp>
        <selectAreaProp :selectAreaPropShow="selectAreaPropShow"
                        :selectAreaFn="selectAreaFn"
                        :intiTheModel="intiTheModel"
                        :deptId="userInfo.deptid
                        "></selectAreaProp>
    </div>
</template>

<script>
import { XHeader, Tabbar, Group, Cell, Card, XDialog, TransferDom, InlineLoading } from 'vux'
import leftmove from './left'
import myMenu from '@/commonComponents/menu'
import companyProp from '@/commonComponents/companyProp'
import projectTypeProp from '@/commonComponents/projectTypeProp'
import selectAreaProp from '@/commonComponents/selectAreaProp' // 区域选择
export default {
    name: 'App',
    directives: {
        TransferDom
    },
    data () {
        return {
            inputValue: '',
            showContent001: false,
            formdata: {
                conpamy: ''
            },
            dayneed: '',
            role: '',
            showarr: [],
            addfirst: '',
            menulist: [],
            baseList: '',
            hidelist: '',
            show: false,
            checktime: '',

            userId: '',
            tokenId: '',
            projectId: '',
            userInfo: '',
            showDate: '',
            list1: [['全部', '待完善', '待整改', '待验收', '待审核', '待分子公司复查', '待复查验证', '多次整改', '即将到期', '预期未整改', '已关闭']],
            state: [],
            showList: [],
            companyName: '', // 单位名称
            companyDepId: '', // 单位id
            companyPropShow: false, // 选择单位弹框
            projectTypeShow: false, // 选择工程类别
            projectName: '全部',
            projectTypeId: '',
            intiTheModel: [{ name: '全部', id: '' }],
            selectAreaPropShow: false,
            areaName: '全部',
            AreaId: ''
        }
    },
    components: {
        Tabbar,
        Group,
        Cell,
        XHeader,
        Card,
        leftmove,
        XDialog,
        myMenu,
        InlineLoading,
        companyProp,
        projectTypeProp,
        selectAreaProp
    },
    computed: {
    },
    watch: {
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid
        this.tokenId = this.userInfo.tokenId
        this.projectId = this.userInfo.deptid
        this.role = this.userInfo.departsir
        this.companyName = this.userInfo.deptname
        this.companyDepId = this.userInfo.deptid
        if (this.$store.state.checkcompany.state) {
            this.state = [this.$store.state.checkcompany.state]
        }
        if (!this.$store.state.checkcompany.starttime) {
            this.$store.state.checkcompany.starttime = this.getdatenew()
        }
        if (!this.$store.state.checkcompany.endtime) {
            this.$store.state.checkcompany.endtime = this.getdatenewnext()
        }
        // if (!this.$store.state.checkcompany.areaName) {
        //     this.$store.state.checkcompany.areaName = '全部'
        // }
        // if (!this.$store.state.checkcompany.projectName) {
        //     this.$store.state.checkcompany.projectName = '全部'
        // }

        this.lookcompanylist()
    },
    methods: {
        showlook (showindex) {
            let listget = [...this.$store.state.HiddenDangers]
            let arr = []

            listget.forEach(
                (item) => {
                    let flag = this.typechange(item)
                    if (item.state == '已填写') {
                        arr = [...arr, item]
                    }
                }
            )

            if (arr.length > 0) {
                this.$store.state.noticeHidden = arr
                this.$store.state.type = showindex
                this.$router.push({ path: '/testing/notice' })
            } else {
                this.$vux.toast.text('请填写检查记录')
            }
        },
        typechange (item) {
            if (!item.checkDeptName) {
                return false
            }
            return true
        },
        selectType () {
            // this.$router.push({ path: 'hidechecklook' })
            this.companyPropShow = true
        },
        selectArea () {
            // this.$router.push({ path: 'projectarea' })
            this.selectAreaPropShow = true
        },
        projectType () {
            // this.$router.push({ path: 'projectType' })
            this.projectTypeShow = true
        },
        changestate (val) {
            if (val[0] == '全部') {
                this.$store.state.checkcompany = Object.assign({}, this.$store.state.checkcompany, {
                    'state': ''
                })
            } else {
                this.$store.state.checkcompany = Object.assign({}, this.$store.state.checkcompany, {
                    'state': val[0]
                })
            }

            this.lookcompanylist()
        },
        lookdj () {
            this.$store.state.checkcompany = Object.assign({}, this.$store.state.hiddenlist, {
                'deptName': this.$store.state.checkcompany.Name,
                'deptId': this.$store.state.checkcompany.Id,
                'projectDutyPerson': this.$store.state.checkcompany.DutyPerson
            })
        },
        lookrecord () {
            this.$router.push({ path: '/testing/lookdetail' })
        },
        submitmsg () {

            //
        },
        truebtn () {
            this.submitNametwo()
        },
        selectNew () {
            this.dayneed = '日常检查'
        },
        lookcompanylist () { // 查看项目级公司信息
            if (this.role != 1) {
                this.AreaId = ''
            }
            // if (this.$store.state.checkcompany.areaName == '全部') {
            //     AreaId = []
            // } else if (this.$store.state.checkcompany.areaName == '无') {
            //     AreaId = []
            //     area = '无'
            // } else {
            //     if (this.$store.state.checkcompany.AreaId) {
            //         AreaId = [this.$store.state.checkcompany.AreaId]
            //     }
            // }

            if (this.areaName == '全部') {
                this.AreaId = []
            } else if (this.areaName == '无') {
                this.AreaId = []
            } else {
                if (this.AreaId) {
                    this.AreaId = [this.AreaId]
                }
            }

            // if (this.$store.state.checkcompany.projectName == '全部') {
            //     this.$store.state.checkcompany.ProjectTypeId = ''
            // }

            if (this.projectName == '全部') {
                this.projectTypeId = ''
            }
            let param = {
                'allowPaging': true,
                'business': 'SearchHiddenDangers',
                'data': {
                    'deptId': this.companyDepId,
                    'from': this.$store.state.checkcompany.starttime,
                    'to': this.$store.state.checkcompany.endtime,
                    'state': this.$store.state.checkcompany.state,
                    'ProjectTypeId': this.projectTypeId,
                    'AreaId': this.AreaId,
                    'area': this.areaName
                },
                'pageIndex': 0,
                'pageSize': 99999,
                'tokenId': this.tokenId,
                'userId': this.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    if (res.data.code == 0) {
                        this.showList = res.data.data
                    }
                }
            )
        },
        showmsg (index) {
            this.showarr[index] = !this.showarr[index]
            this.$forceUpdate()
        },
        cancelbtn () {
            this.show = false
        },
        changerouter (item) {
            if (item.StateDesc == '待完善') {
                this.$router.push('/hidePerfectDetail?id=' + item.Id + '&type=1')
            } else if (item.StateDesc == '待整改') {
                this.$router.push('/hideCorrectDetail?id=' + item.Id + '&type=1')
            } else if (item.StateDesc == '待验收') {
                this.$router.push('/hideCAADetail?id=' + item.Id + '&type=1')
            } else if (item.StateDesc == '待审核') {
                this.$router.push('/hideAuditDetail?id=' + item.Id + '&type=1')
            } else if (item.StateDesc == '待分子公司复查') {
                this.$router.push('/zgbReview?id=' + item.Id + '&type=1')
            } else if (item.StateDesc == '待复查验证') {
                this.$router.push('/reviewVerifyDetail?id=' + item.Id + '&type=1')
            } else if (item.StateDesc == '已关闭') {
                this.$router.push(`/overHide?id=${item.Id}`)
            }
        },
        changetime (val) {
            this.lookcompanylist()
            // this.$store.state.checktime = val;
            // localStorage.checktime = val;
        },
        getdatenew () {
            var date = new Date()
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()
            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate
            }
            var currentdate = year + seperator1 + '01' + seperator1 + '01'
            return currentdate
        },
        getdatenewnext () {
            var date = new Date()
            //  date.setTime(date.getTime()+ 24*60*60*1000);
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()

            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate
            return currentdate
        },
        selectCompany (item) {
            this.companyPropShow = false
            this.companyName = item.Name // 单位名称
            this.companyDepId = item.Id // 单位id
            this.lookcompanylist()
        },
        selectProjectType (item) {
            this.projectTypeShow = false
            this.projectName = item.Name
            this.projectTypeId = item.Id
            this.lookcompanylist()
        },
        selectAreaFn (item) {
            this.selectAreaPropShow = false
            this.areaName = item.name
            this.AreaId = item.id
            this.lookcompanylist()
        }
    }

}
</script>

<style scoped lang="less">
.test {
    min-height: 100%;
    background: #ebeef2;
}
.right-select {
    font-size: 13px;
    color: #999;
    padding-right: 18px;
    height: 20px;
    overflow: hidden;
    width: 180px;
    position: relative;
    padding-right: 20px;
    line-height: 20px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.icon-jinru {
    color: #c8c8cd;
}
.right-select {
    font-size: 13px;
    color: #999;
}
.lookmsg {
    color: #2269ff;
}
.lookmsgTwo {
    color: #000000;
}
.lookmsgTwo > span {
    margin-left: 10px;
    color: #999999;
}
.lookmsg > span {
    margin-left: 10px;
    color: #999999;
}
.card-padding {
    height: 100px;
    width: 230px;
    padding-right: 30px;
}
.newImage {
    width: 100px;
    height: 74px;
    border-radius: 7px;
    display: inline-block;
}
.newImage img {
    width: 100%;
    height: 100%;
}
.content-gulp {
    padding-left: 20px;
    background: #fff;
}
.contentlist {
    width: 100%;
    height: 106px;
    display: flex;
    justify-content: space-between;
    padding: 16px 20px 16px 0;
    border-bottom: 1px solid #efeff4;
}
.card-title1 {
    width: 100%;
    //   height:15px;
    line-height: 14px;
    font-size: 14px;
    color: #999;
    margin-top: 0;
    padding-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    white-space: nowrap; /*不换行 */
}
.card-show {
    padding-top: 12px;
    width: 100%;
    height: 26px;
    line-height: 14px;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    white-space: nowrap; /*不换行 */
}
.danger-nomal {
    margin-top: 20px;
    color: #ff7333;
    font-size: 14px;
}
.danger-nomal > span {
    color: #999999;
}
.btn-bottom {
    width: 100%;
    height: 115px;
    padding-top: 41px;
}
.btn {
    height: 40px;
    width: 204px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    background-color: #2269ff;
    margin: 0 auto;
}
.rightmsg {
    color: #c8c8cd;
    position: absolute;
    right: 0;
    top: 0;
}
.icon-zengjia {
    position: absolute;
    //  right:16px;
    color: #15bd84;
    font-size: 22px;
}
.selectspan {
    margin-right: 8px;
    color: #b0b0b0;
    font-size: 14px;
}
.diago {
    padding: 16px;
}
.showdetail {
    display: flex;
    padding-top: 30px;
    justify-content: space-around;
}
.showbtn {
    width: 100px;
    height: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #2269ff;
}
.truebtn {
    width: 100px;
    height: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    background-color: #2269ff;
    color: #fff;
}
.iconclick {
    vertical-align: middle;
    fill: #2269ff;
}
.form-sectionq {
    background-color: #fff;
}
</style>
